<template>
  <div class="create-content">
    <div>
      <div class="">
        <!-- <svg class="" viewBox="0 0 24 24"> -->
        <!-- <g fill="none" fill-rule="evenodd"> -->
        <!-- </svg> -->
        <!-- <span>从Excel导入数据，并自动生成问卷</span> -->
      </div>
      <button></button>
    </div>
    <h2 class="recommend">为您推荐</h2>
    <div>
      <ol class="create-new">
        <li v-for="item in news" :key="item.id">
          <router-link class="new-nav" :to="item.nav">
            <i class="new-i">{{item.id}}</i>
            <span class="new-title">{{ item.title }}</span>
            <span class="new-text">{{ item.text }}</span>
          </router-link>
        </li>
      </ol>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      news: [
        {
          id: 1,
          text: '20个问题/3页',
          title: '1身体健康状况调查',
          nav: '/',
        },
        {
          id: 2,
          text: '20个问题/3页',
          title: '2身体健康状况调查',
          nav: '/',
        },
        {
          id: 3,
          text: '20个问题/3页',
          title: '3身体健康状况调查',
          nav: '/',
        },
        {
          id: 4,
          text: '20个问题/3页',
          title: '4身体健康状况调查',
          nav: '/',
        },
        {
          id: 5,
          text: '20个问题/3页',
          title: '5身体健康状况调查',
          nav: '/',
        },
        {
          id: 6,
          text: '20个问题/3页',
          title: '6身体健康状况调查',
          nav: '/',
        },
        {
          id: 7,
          text: '20个问题/3页',
          title: '7身体健康状况调查',
          nav: '/',
        },
        {
          id: 8,
          text: '20个问题/3页',
          title: '8身体健康状况调查',
          nav: '/',
        },
        {
          id: 9,
          text: '20个问题/3页',
          title: '9身体健康状况调查',
          nav: '/',
        },
        {
          id: 10,
          text: '20个问题/3页',
          title: '10身体健康状况调查',
          nav: '/',
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.create-new{
column-count: 2;
column-gap: 200px;
}
.recommend{
  font-size: 20px;
  padding-top: 40px;
  padding-bottom: 13px;
  font-weight: normal;
  border-bottom: 1px solid #d9d9d9;
}
.new-nav{
  position: relative;
  display: block;
  height:35px;
  line-height: 35px;
  padding-right: 200px;
}
li:nth-child(-n+3) .new-i {
  color: blue;
}
.new-i{
  margin-right: 10px;
  font-size: 14px;
}
.new-title{
  font-size: 16px;
}
.new-text{
  position: absolute;
  top:50%;
  right:0px;
  transform: translateY(-50%);;
  font-size: 14px;
  color: #999;
}
</style>
